<template>
  <div class="contents">
    <PanelTitle title="重点企业" />
    <div class="mt">

      <table>
        <thead>
          <tr>
            <th style="width: 50%;">企业名称</th>
            <th style="width: 25%">企业类型</th>

            <th style="width: 25%;">操作</th>
          </tr>
        </thead>
      </table>
      <loopScroll ref="loopScrollDiv" class="loop-scroll" style="">
        <table>
          <tbody>
            <tr v-for="item in enterpriseList">
              <td style="width: 50%;">{{ item.name }}</td>
              <td style="width: 25%">
                <div v-if="item.type == 1">种植</div>
                <div v-if="item.type == 2">加工</div>
                <div v-if="item.type == 3">流通</div>
                <div v-if="item.type == 4">自然人</div>
                <div v-if="item.type == 5">其他</div>

              </td>

              <td style="width: 25%;">
                <VideoCameraFilled @click="toDevice(item)"
                
                :style="{color: (item.iotProductType == 3 || item.iotProductType == 5) ? '#00fff6' : '#ccc'}"
                class="camera" />
               
              </td>
            </tr>
          </tbody>
        </table>
      </loopScroll>
    </div>

    <VideoList :visible="visible"
    :list="list"
    @cancel="visible = false"></VideoList>
  </div>
</template>

<script setup>
import { VideoCameraFilled } from '@ant-design/icons-vue';
import { ref, onMounted, nextTick  } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

import loopScroll from "@/components/loopScroll.vue";
import VideoList from '@/components/videoList.vue';
import { message } from 'ant-design-vue';
const enterpriseList = ref([]);
const visible = ref(false)
const list = ref([])
const loopScrollDiv = ref()
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/main/list",
    method: "get",
    params: {
      pageNum: 1,
      pageSize: 1000,
      keyEnt: 1,
      // yearly: new Date().getFullYear()
    },
  });
  
  let map = {}
  let list = res.data.list.filter((item) => {
    if(map[item.code]){
      return false
    } else {
      map[item.code] = 1
      return true

    }
  })
  enterpriseList.value = list
  
  await nextTick()
  setTimeout(() => {
    
    loopScrollDiv.value.start()
  }, 500)

});
const toDevice = async (item) => {
  
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/iot/device/list",
    method: "get",
    params: {
      pageNum: 1,
      pageSize: 1000,
      entCode: item.code
    },
  });
  console.log(res)
  list.value = res.data.list

  if(list.value.length == 0){
    message.warn('该企业监控还未接入')
    return
  }
 
  visible.value = true
}
defineExpose({toDevice})
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  // background: #054f63ee;
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

}

.mt {
  margin-top: vh(-30);
  height: vh(300);
}

.maps {
  height: vh(190);
  width: 100%;
}


table,
th,
td {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;

  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(10);
  text-align: center;
}
.loop-scroll{
  height:32vh;
  width: vw(344);
  margin: 0 auto;
}
table {
  width: vw(344);
  margin: 0 auto;
}

th {
  color: #fff;
  background: rgba(50, 200, 167, 0.45);
  min-width: vw(60);
  line-height: vh(20);
  padding: vh(9) vw(9);
}

td {
  color: #2cd7bc;
  line-height: vh(14);
  padding: vh(9) vw(9);
}
.camera {
  cursor: pointer;
  font-size: 20px;
  color: #ccc;
}
</style>